<template>
  <ul class="movies-list">
    <li v-for="h in hot" :key="h.id">
      <router-link :to="{name:'MovieView',params:{id:h.id}}">
        <div class="hotImg">
          <img :src="h.images.small" alt="电影图片" width="100" height="150">
        </div>
        <div class="hotTxt">
          <p>{{h.title}}</p>
          <rating v-if="h.rating" :rating="h.rating"></rating>
        </div>
      </router-link>
    </li>
  </ul>
</template>

<script>
  import  Rating from '../../../public/Rating'
  export default {
    name: 'Hot',
    components:{
      Rating
    },
    data(){
      return{
        hot:[]
      }
    },
    created() {
      this.axios.get('/api/movie/in_theaters?count=8')
        .then((res) => {
          let hot = res.data.subjects
          this.hot = hot
          // console.log(hot)
        })
        .catch((err) => console.log(err))
    }
  }
</script>

<style lang="scss">
.movies-list{
  height: 210px;
  overflow-x: auto;
  white-space: nowrap;
  text-align: center;
  li{
    display: inline-block;
    margin-right: 0.48rem;
  }
  .hotTxt{
    text-align: center;
    p{
      width: 100px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-top: .6rem;
      line-height: .94rem;
      color: #111;
    }
    .star-full {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-image: url();
      background-size: cover;
    }

    .star-gray {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-image: url();
      background-size: cover;
    }

    .star-half {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-image: url();
      background-size: cover;
    }
    .rating0,.average {
      color: #aaa;
      line-height: .94rem;
      margin-top: .3rem;
      font-size: .72rem;
    }
  }
}
</style>
